<template>
  <div class="home">
    <gltitle :is_mt="true" :is_notice="false" :is_back="true" :is_name="true" :title="title"></gltitle>
    <div class="container">
        <div class="banner" v-if="bannerList.length != 0">
            <swiper ref="mySwiper" :options="swiperOptions2">
                <swiper-slide v-for="item in bannerList" :key="item">
                    <div class="item">
                        <img :src="item" alt="" />
                    </div>
                </swiper-slide>
            </swiper>
            <div class="hd">
                <div class="swiper-hd"></div>
            </div>
        </div>



        <div class="info">
            <div class="title">{{ info.name }}</div>
            <ul>
                <li class="flex">
                    <div class="flex1" v-if="id == 2">{{ $t('page4.doc74') }}</div>
                    <div class="flex1" v-if="id == 1">{{ $t('page4.doc75') }}</div>
                    <div class="s">{{ info.min }} - {{ info.max }}U</div>
                </li>
                <li class="flex">
                    <div class="flex1">{{ $t('page4.doc76') }}</div>
                    <div class="s">{{ info.days }} {{ $t('page.doc105') }}</div>
                </li>
                <li class="flex" v-if="id == 1">
                    <div class="flex1">{{ $t('page4.doc77') }}</div>
                    <div class="s">{{ info.rate * 100 }}%</div>
                </li>
                <li class="flex" v-if="id == 2">
                    <div class="flex1">{{ $t('page4.doc78') }}</div>
                    <div class="s">{{ info.viewIncomeRate }}</div>
                </li>
            </ul>
        </div>

        <div class="sunBox">
            <div class="title">{{ $t('page4.doc79') }}</div>
            <div class="flex">
                <div class="ico" @click="onReduce"><img src="../../assets/images/licai/ico_reduce.png" alt=""></div>
                <div class="flex1">
                    <input type="text" v-model="amount" @blur="onInput">
                </div>
                <div class="ico" @click="onAdd"><img src="../../assets/images/licai/ico_add.png" alt=""></div>
                <div class="name">USDT</div>
            </div>
        </div>

        <div class="arcBox">
            <div class="title">{{ $t('page4.doc80') }}</div>
            <div class="p" v-html="info.introduce">

            </div>
        </div>



    </div>
      <div class="buy">
          <div class="container">
              <button @click="show = true ">{{ $t('page4.doc81') }}</button>
          </div>
      </div>

      <van-popup v-model="show" style="background: none">
          <div class="toastBox">
              <div class="close"><van-icon name="cross" @click="show = false"/></div>
              <div class="titles">
                  {{ $t('page4.doc81') }}
              </div>
              <div class="am">{{ amount }} USDT</div>
              <button @click="onConf">{{ $t('page.doc83') }}</button>
          </div>
      </van-popup>





      <van-popup v-model="password_show" round :position="is_position" style="background: none;">
          <div class="password_pop">
              <div class="pass">
                  <div class="title rel tac">
                      {{ $t('page.doc28') }}
                      <div class="abs" @click="passwordShowClick"><van-icon name="cross" /></div>
                  </div>
                  <div class="box rel" :class="{on:isPc}">
                      <input type="text" v-model="password" maxlength="6" class="abs" ref="getFocus">
                      <van-password-input
                              :gutter="20"
                              :value="password"
                              :length="6"
                              :focused="showKeyboard"
                              @focus="showKeyboard = true"
                      />
                  </div>
                  <button  @click="onBtn" :disabled="isDisable">{{ $t('page.doc29') }}</button>
              </div>
              <div class="jianpan" v-if="!isPc">
                  <p>{{ $t('page.doc30') }}</p>
                  <van-number-keyboard
                          v-model="password"
                          :show="showKeyboard"
                          @blur="showKeyboard = true"
                  />
              </div>
          </div>
      </van-popup>

  </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {

  data() {
    return {
      title:this.$t('page4.doc69'),
      amount:0,
        show:false,
        pid:this.$route.query.pid,
        id:this.$route.query.id,
        info:[],
        password:'',
        password_show:false,
        showKeyboard: true,
        isDisable:false,
        isPc:false,
        is_position:'bottom',

        swiperOptions2: {
            pagination: {
                el: ".swiper-hd",
                clickable: true,
            },
            autoHeight: true,
            loop: false,
            loopedSlides: 1,
            slidesPerView: 1,
            spaceBetween: 0,
        },
        bannerList:[]

    };
  },
  created() {

  },
  mounted() {
      if(this.id == 1){
          this.title = this.$t('page4.doc72')
          document.title = this.$t('page4.doc72')
      }else{
          this.title = this.$t('page4.doc69')
          document.title = this.$t('page4.doc69')
      }
      this.getInfo()

  },
  methods: {
      onConf(){
          this.password_show = true
          this.$refs.getFocus.focus()

      },
      onInput(){
          if (parseInt(this.amount) < parseInt(this.info.min)) {
              this.amount = this.info.min
              this.$toast(this.$t('page4.doc82') + this.info.min + 'u')
              return
          }
          if(parseInt(this.amount) > parseInt(this.info.max)){
              this.amount = this.info.max
              this.$toast(this.$t('page4.doc83') + this.info.max + 'u')
          }
      },
      onReduce(){
          if(this.amount <= this.info.min) return
          this.amount = this.amount - 1
      },
      onAdd(){
          if(this.amount >= this.info.max) return
          this.amount = this.amount + 1
      },
      passwordShowClick(){
          this.password_show=false
          this.password = ''
      },

      getInfo(){
          let url = ''
          if(this.id == 1){
              url = this.URL.financial.detail
          }else{
              url = this.URL.invest.detail
          }
          this.$post(url, {
              productId:this.pid
          }).then((res) => {
              if (res.code == 0) {
                this.info = res.data
                  this.amount = parseInt(res.data.min)
                  this.bannerList = res.data.bannerList
              } else {
                  this.$toast(res.message);
              }
          });
      },

    onBtn(){
        let url = ''
        if(this.id == 1){
            url = this.URL.financial.buy
        }else{
            url = this.URL.invest.buy
        }
      this.$post(url, {
          productId:this.pid,
          amount:this.amount,
          password:this.$md5(this.password)
      }).then((res) => {
        if (res.code == 0) {
          this.password_show = false
            this.show = false
            this.password = ''
            this.$toast(res.message);


        } else {
          this.$toast(res.message);
        }
      });
    },






    path_url(url){
      this.$router.push({
        path:url,
        query:{
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
.banner {
  img {
    width: 100%;
  }
}
.title {
  color: #FFF;
  font-size: .32rem;
  font-weight: 500;
  text-transform: capitalize;
}
.info {
  border-radius: .2rem;
  margin: .28rem 0;
  padding: .32rem;
  background: #1A202E;
  ul {
    border-top: .02rem solid rgba(255, 255, 255, 0.10);
    margin-top: .32rem;
    padding-top: .12rem;
    li {
      padding: .24rem 0 0 0;
    }
    .flex1 {
      color: rgba(255, 255, 255, 0.50);
    }
  }
}

.sunBox {
  .flex {
    margin-top: .32rem;
    align-items: center;
    .ico {
      border-radius: .12rem 0px 0px .12rem;
      background: #1A202E;
      display: flex;
      align-items: center;justify-content: center;
      width: .72rem;
      height: .72rem;
      &:last-child {
        border-radius: 0 .12rem .12rem 0;
      }
    }
    .flex1 {
      margin: 0 .04rem;
      background: #1A202E;
      input {
        height: .72rem;border:0;
        width: 100%;
        font-size: .32rem;
        text-align: center;background: none;
      }
    }
    .name {
      font-size: .32rem;
      margin-left: .2rem;
    }
  }
}

.arcBox {
  padding: .32rem 0;
  .p {
    font-size: .24rem;
    color: rgba(255, 255, 255, 0.50);
    margin-top: .32rem;
  }
}

.buy {
  position: fixed;
  padding: .28rem 0;
  bottom:.0;
  width: 100%;
  max-width:8.5rem;background: #121622;
  button {
    border-radius: .2rem;
    background: linear-gradient(90deg, #7B02FE 0%, #0570FD 100%);
    color: #fff;height: .88rem;
    border:0;
    width: 100%;
  }
}

.toastBox {
  border-radius: .24rem;
  width: 6rem;
  background: #1A202E;
  padding: .4rem;
  .close {
    text-align: right;
    margin-bottom: -.2rem;
    i {
      font-size: .4rem;
    }
  }
  .titles {
    color: rgba(255, 255, 255, 0.60);
    text-align: center;
    font-size: .32rem;
    font-weight: 500;
  }
  .am {
    padding: .32rem .56rem;
    color: #FFF;
    text-align: center;
    font-size: .56rem;
    font-weight: 600;
    line-height: .56rem; /* 100% */
  }
  button {
    border-radius: .2rem;
    background: linear-gradient(90deg, #7B02FE 0%, #0570FD 100%);
    color: #fff;height: .88rem;
    border:0;
    width: 100%;
  }
}
</style>